<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地狗导航</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font-size:12px;
		line-height: 1.7;
	}
	li{
		list-style: none;
		font-size: 14px;
	}
	#content{
		width: 800px;
		margin: 0 auto;
		padding: 20px;
	}
	#content h1{
		color:blue;
	}

	#content .item{
		padding: 20px;
		margin-bottom: 10px;
		border: 1px solid red;
	}
	#content .item h2{
		font-size: 16px;
		line-height: 16px;
		font-weight: bold;
		border-bottom: 2px solid green;
		margin-top: 20px;
	}
	#content .item li{
		display: inline;
		margin-right: 10px;

    }
    #content .item li a img{
    	margin-top: 10px;
    	width:230px;
    	height:230px;
    	border: none;
    }
    #menu{
    	position: fixed;
    	top:300px;
    	left:50%;
    	margin-left: 400px;
    	width: 80px;
    }
    #menu ul li a{
    	font-size: 20px;
    	color:blue;
    	text-decoration: none;
    	line-height: 50px;
    	width: 80px;
    	text-align: center;
    }
    #menu ul li a:hover,
    #menu ul li a.current{
    	color:#fff;
    	background: blue;
    }


	</style>
	<script src="jquery-1.8.3.js"></script>
	<script>
		$(document).ready(function(){
			$(window).scroll(function(){
				var top=$(document).scrollTop();
				var menu=$("#menu");
				var currentId="";
				var items=$("#content").find(".item");
				items.each(function(){
					var m=$(this);
					var itemtop=m.offset().top;
					if(top>itemtop-200){
                     currentId="#"+m.attr("id");
					}else{
						return false;
					}
				});
				var currentlink=$("#menu").find(".current");
				if(currentId && currentlink.attr("href")!=currentId){
					currentlink.removeClass("current");
					$("#menu").find("[href="+currentId+"]").addClass("current");
				}
			});
		});
	</script>

</head>
<body>
	<div id="menu">
		<ul>
		<!-- 使用id做锚点链接 -->
			<li><a href="#item1" class="current">1F 男装</a></li>
			<li><a href="#item2">2F 女装</a></li>
			<li><a href="#item3">3F 美妆</a></li>
			<li><a href="#item4">4F 数码</a></li>
			<li><a href="#item5">5F 母婴</a></li>
		</ul>
	</div>

		<div id="content">
			<h1>地狗购物网</h1>
			<div id="item1" class="item">
				<h2>1F 男装</h2>
				<ul>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
					<li><a href="#"><img src="1.jpg" alt=""></a></li>
				</ul>
			</div>

			<div id="item2" class="item">
				<h2>2F 女装</h2>
				<ul>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
					<li><a href="#"><img src="2.jpg" alt=""></a></li>
				</ul>
			</div>

			<div id="item3" class="item">
				<h2>3F 美妆</h2>
				<ul>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
					<li><a href="#"><img src="3.jpg" alt=""></a></li>
				</ul>
				</div>

				<div id="item4" class="item">
				<h2>4F 数码</h2>
				<ul>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
					<li><a href="#"><img src="4.jpg" alt=""></a></li>
				</ul>
				</div>

				<div id="item5" class="item">
				<h2>5F 母婴</h2>
				<ul>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
					<li><a href="#"><img src="5.jpg" alt=""></a></li>
				</ul>
				</div>
			</div>
		</div>
    

	
	<!-- ul>li*5>a  tab -->
	<!-- <ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul> -->

</body>
</html>